<template>
  <div class="data lowcode">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="数据编号">
          <el-input v-model="form.dataCode" clearable></el-input>
        </el-form-item>
        <el-form-item label="数据名称">
          <el-input v-model="form.dataName" clearable></el-input>
        </el-form-item>
        <el-form-item label="数据源编号">
          <el-select
            v-model="form.dataSourceCode"
            placeholder="数据源编号"
            clearable
          >
            <el-option
              v-for="item of sourceArray"
              :Key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查 询</el-button>
          <el-button type="primary" @click="reset">重 置</el-button>
          <el-button type="primary" @click="addEdit('add')">新 增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <HmxTable
        :table-data="
          queryData.slice(
            (page.pageIndex - 1) * page.pageSize,
            page.pageIndex * page.pageSize
          )
        "
        :options="tableOptions"
        :columns="tableColumn"
        @command="handleAction"
        @size-change="handlerPageSize"
        @current-change="handlerPageIndex"
      />
    </div>
    <addData :dataShow="dataShow" :option="option" @data-close="dataClose" />
  </div>
</template>
<script setup>
import { reactive, ref, computed, onMounted } from "vue"
import HmxTable from "../../components/hmx-table/index.vue"
import addData from "./dialog/addData.vue"
import { ElMessageBox } from "element-plus"
import {
  getDataSetting,
  deleteDataSetting,
  getDataType,
  getSourceType,
  getDataSource,
} from "../../api/dataSource.js"

let form = reactive({
  dataName: "",
  dataCode: "",
  dataSourceCode: "",
})
let sourceArray = ref([])
let typeArray = ref([])
let totalData = ref([])
let queryData = ref([])
let loading = ref(false)
let page = reactive({
  pageIndex: 1,
  pageSize: 10,
})
let dataShow = ref(false)
let option = reactive({
  type: "add",
  data: {},
  typeArray: [],
  sourceArray: [],
})
let tableColumn = [
  {
    type: "index",
    label: "No.",
    align: "center",
    fixed: "left",
    width: "50",
  },
  { prop: "dataCode", label: "数据编号" },
  { prop: "dataName", label: "数据名称" },
  { prop: "dataType", label: "数据类型" },
  { prop: "dataSourceCode", label: "数据源编号" },
  { prop: "dataAddress", label: "数据地址" },
  {
    label: "操作",
    width: 120,
    buttons: [
      {
        name: "编辑",
        type: "primary",
        command: "edit",
      },
      {
        name: "删除",
        type: "danger",
        command: "del",
      },
    ],
  },
]
const tableOptions = computed(() => {
  return {
    loading: loading.value,
    showPagination: true,
    paginationPosition: "right",
    border: true,
    paginationConfig: {
      total: total.value,
      currentPage: page.pageIndex,
      pageSize: page.pageSize,
    },
  }
})
const total = computed(() => {
  return queryData.value.length
})

function handleAction(command, row) {
  if (command == "del") {
    delData(row)
  } else if (command == "edit") {
    addEdit("edit", row)
  }
}
function handlerPageSize(pageSize) {
  page.pageSize = pageSize
  page.pageIndex = 1
  search()
}
function handlerPageIndex(pageIndex) {
  page.pageIndex = pageIndex
  search()
}

function search() {
  page.pageIndex = 1
  queryData.value = totalData.value.filter(item => {
    return (
      item.dataName.includes(form.dataName.trim()) &&
      item.dataCode.includes(form.dataCode.trim()) &&
      item.dataSourceCode.includes(form.dataSourceCode.trim())
    )
  })
}

function reset() {
  form.dataCode = ""
  form.dataName = ""
  form.dataSourceCode = ""
  search()
}

async function getTable() {
  totalData.value = []
  let res = await getDataSetting()
  if (res.status) {
    totalData.value = res.data
  }
  queryData.value = totalData.value
}

function addEdit(type, data) {
  option.type = type
  if (type == "edit") {
    console.log(data, "data")
    option.data = data
  }
  option.typeArray = typeArray.value
  option.sourceArray = sourceArray.value
  dataShow.value = true
}

function dataClose(val) {
  dataShow.value = false
  val && getTable()
}

function delData(row) {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log("删除", row)
      let res = await deleteDataSetting(row.dataCode)
      if (res.status) {
        ElMessage.success("删除成功")
        getTable()
      } else {
        ElMessage.error(res.message || "删除失败")
      }
    })
    .catch(e => {
      console.log(e)
    })
}

async function dataTypes() {
  typeArray.value = []
  let res = await getDataType()
  if (res.status) {
    typeArray.value = []
    for (let key in res.data) {
      typeArray.value.push({ value: key, label: res.data[key] })
    }
  }
}

async function sourceTypes() {
  sourceArray.value = []
  let res = await getDataSource()
  if (res.status) {
    res.data.forEach(item => {
      sourceArray.value.push({
        value: item.dataSourceCode,
        label: item.dataSourceCode,
      })
    })
  }
}

onMounted(() => {
  getTable()
  sourceTypes()
  dataTypes()
})
</script>
<style scoped lang="scss">
.data {
  width: 100%;
  height: 100%;
  .search {
    height: 50px;
  }
  .body {
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
  }
}
</style>
